<template>
	<div>
		
<swiper :options="swiperOption" class="swiper-box">
    <swiper-slide class="swiper-item">Slide 1</swiper-slide>
    <swiper-slide class="swiper-item">Slide 2</swiper-slide>
    <swiper-slide class="swiper-item">Slide 3</swiper-slide>
    <swiper-slide class="swiper-item">Slide 4</swiper-slide>
    <swiper-slide class="swiper-item">Slide 5</swiper-slide>
    <swiper-slide class="swiper-item">Slide 6</swiper-slide>
    <swiper-slide class="swiper-item">Slide 7</swiper-slide>
    <swiper-slide class="swiper-item">Slide 8</swiper-slide>
    <swiper-slide class="swiper-item">Slide 9</swiper-slide>
    <swiper-slide class="swiper-item">Slide 10</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
	</div>
</template>

<script>
	import VueAwesomeSwiper from 'vue-awesome-swiper';
	import { swiper, swiperSlide } from 'vue-awesome-swiper';
    export default {
    	name:'test',
        data() {
	      return {
	        swiperOption: {
	          autoplay: 3500,
	          setWrapperSize :true,
	          pagination : '.swiper-pagination',
	          paginationClickable :true,
	          mousewheelControl : true,
	          observeParents:true,
	        },
	//      swiperOption: {
	//        pagination: '.swiper-pagination',
	//        direction: 'vertical',
	//        slidesPerView: 1,
	//        paginationClickable: true,
	//        spaceBetween: 30,
	//        mousewheelControl: true
	//      },
	        swiperSlides: [1, 2, 3, 4, 5]
	      }
	    },
	    mounted() {
	      setInterval(() => {
	        console.log('simulate async data')
	        let swiperSlides = this.swiperSlides
	        if (swiperSlides.length < 10) swiperSlides.push(swiperSlides.length + 1)
	      }, 3000)
	    },
		components: {
		    swiper,
		    swiperSlide
		}
    };

</script>
<style lang="scss">
  html,body {
    position: relative;
    height: 100%;
  }
  body {
    background: #eee;
  }
  .view{
  	width: 100%;
  	    display: block;
  }
  .swiper-box {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  .swiper-item {
    height: 100%;
    text-align: center;
    font-size: 18px ;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
</style>